<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>反应时间测试</title>
    <style>
        /* 样式保持不变，省略部分以简洁展示 */
        body {
            font-family: Arial, sans-serif;
        }

        .box {
            width: 100%;
            height: 100vh;
            background-color: #4CAF50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: background-color 0.1s ease;
        }

        .content {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 600px;
            width: 90%;
        }

        .title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            color: #333;
        }

        .tip {
            color: #666;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .time {
            color: #2196F3;
            font-size: 2rem;
            margin: 1rem 0;
            font-weight: bold;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin: 1rem 0;
            padding: 1rem;
            background-color: #f5f5f5;
            border-radius: 0.5rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #666;
        }

        .stat-value {
            font-size: 1.2rem;
            color: #333;
            font-weight: bold;
        }

        .button {
            padding: 0.8rem 2rem;
            font-size: 1.2rem;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0.5rem;
        }

        .begin-btn {
            background-color: #2196F3;
            color: white;
        }

        .begin-btn:hover {
            background-color: #1976D2;
        }

        .reset-btn {
            background-color: #f44336;
            color: white;
        }

        .reset-btn:hover {
            background-color: #d32f2f;
        }

        .disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .history {
            margin-top: 1rem;
            max-height: 150px;
            overflow-y: auto;
            padding: 0.5rem;
            background-color: #f5f5f5;
            border-radius: 0.5rem;
        }

        .history-item {
            padding: 0.5rem;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
        }

        .history-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="content">
        <h1 class="title">反应时间测试</h1>
        <p class="tip">准备开始...</p>
        <p class="time">等待测试...</p>

        <div class="stats">
            <div class="stat-item">
                <div class="stat-label">最快记录</div>
                <div class="stat-value best">--</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">平均时间</div>
                <div class="stat-value average">--</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">最慢记录</div>
                <div class="stat-value worst">--</div>
            </div>
        </div>

        <button class="button begin-btn">开始测试</button>
        <button class="button reset-btn">重置记录</button>

        <div class="history">
            <div class="history-item">暂无记录</div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const beginBtn = document.querySelector(".begin-btn");
        const resetBtn = document.querySelector(".reset-btn");
        const bg = document.querySelector(".box");
        const timeSpan = document.querySelector(".time");
        const tipSpan = document.querySelector(".tip");
        const historyDiv = document.querySelector(".history");
        const bestSpan = document.querySelector(".best");
        const worstSpan = document.querySelector(".worst");
        const averageSpan = document.querySelector(".average");

        let timer = null;
        let beginTime = 0;
        let endTime = 0;
        let history = [];
        let isWaiting = false;
        let isReadyToClick = false;

        const REACTION_THRESHOLDS = {
            excellent: 200,
            good: 300,
            average: 400,
            slow: 500
        };

        function loadHistory() {
            const saved = localStorage.getItem("reactionTimeHistory");
            if (saved) {
                try {
                    history = JSON.parse(saved);
                    updateStats();
                    updateHistory();
                } catch (e) {
                    history = [];
                }
            }
        }

        function saveHistory() {
            localStorage.setItem("reactionTimeHistory", JSON.stringify(history));
        }

        function getReactionFeedback(time) {
            if (time < REACTION_THRESHOLDS.excellent)
                return {message: "太厉害了！超快的反应速度！", color: "#4CAF50"};
            else if (time < REACTION_THRESHOLDS.good)
                return {message: "非常好！反应很敏捷！", color: "#8BC34A"};
            else if (time < REACTION_THRESHOLDS.average)
                return {message: "不错！反应速度良好。", color: "#2196F3"};
            else if (time < REACTION_THRESHOLDS.slow)
                return {message: "还可以，继续练习吧！", color: "#FF9800"};
            else
                return {message: "加油！多练习可以提高反应速度。", color: "#F44336"};
        }

        function updateStats() {
            if (history.length === 0) {
                bestSpan.textContent = "--";
                worstSpan.textContent = "--";
                averageSpan.textContent = "--";
                return;
            }
            const best = Math.min(...history);
            const worst = Math.max(...history);
            const avg = Math.round(history.reduce((a, b) => a + b) / history.length);
            bestSpan.textContent = `${best}ms`;
            worstSpan.textContent = `${worst}ms`;
            averageSpan.textContent = `${avg}ms`;
        }

        function updateHistory() {
            if (history.length === 0) {
                historyDiv.innerHTML = `<div class="history-item">暂无记录</div>`;
                return;
            }
            historyDiv.innerHTML = history.map((t, i) =>
                `<div class="history-item"><span>第${history.length - i}次</span><span>${t}ms</span></div>`
            ).join('');
        }

        function resetAll() {
            clearTimeout(timer);
            timer = null;
            history = [];
            isWaiting = false;
            isReadyToClick = false;
            tipSpan.textContent = "准备开始...";
            tipSpan.style.color = "#666";
            timeSpan.textContent = "等待测试...";
            bg.style.backgroundColor = "#4CAF50";
            beginBtn.disabled = false;
            beginBtn.classList.remove("disabled");
            updateStats();
            updateHistory();
        }

        beginBtn.addEventListener("click", (event) => {
            event.stopPropagation(); // 阻止冒泡，防止触发背景点击
            if (timer || isWaiting) return;
            beginBtn.disabled = true;
            beginBtn.classList.add("disabled");
            tipSpan.textContent = "等待页面变红...";
            timeSpan.textContent = "准备...";
            bg.style.backgroundColor = "#4CAF50";
            isWaiting = true;
            isReadyToClick = false;
            let randomDelay = Math.random() * 2000 + 1000;
            timer = setTimeout(() => {
                bg.style.backgroundColor = "#f44336";
                tipSpan.textContent = "点击页面！";
                beginTime = Date.now();
                isReadyToClick = true;
                timer = null;
            }, randomDelay);
        });


        bg.addEventListener("click", () => {
            if (!isWaiting) return;

            if (!isReadyToClick) {
                clearTimeout(timer);
                timer = null;
                isWaiting = false;
                isReadyToClick = false;
                tipSpan.textContent = "太早点击了！2秒后自动重新开始...";
                timeSpan.textContent = "请等待红灯出现后再点击";
                bg.style.backgroundColor = "#FFC107";
                setTimeout(() => {
                    tipSpan.textContent = "准备开始...";
                    tipSpan.style.color = "#666";
                    timeSpan.textContent = "等待测试...";
                    bg.style.backgroundColor = "#4CAF50";
                    beginBtn.disabled = false;
                    beginBtn.classList.remove("disabled");
                }, 2000);
                return;
            }

            // 用户正确点击红色背景
            endTime = Date.now();
            const reactionTime = endTime - beginTime;
            const feedback = getReactionFeedback(reactionTime);
            history.unshift(reactionTime);
            timeSpan.textContent = `本次用时：${reactionTime}ms`;
            tipSpan.textContent = feedback.message;
            tipSpan.style.color = feedback.color;
            bg.style.backgroundColor = "#4CAF50";
            updateStats();
            updateHistory();
            saveHistory();
            setTimeout(() => tipSpan.style.color = "#666", 3000);
            isWaiting = false;
            isReadyToClick = false;
            beginBtn.disabled = false;
            beginBtn.classList.remove("disabled");
        });

        resetBtn.addEventListener("click", () => {
            if (confirm("确定要清除所有历史记录吗？")) {
                localStorage.removeItem("reactionTimeHistory");
                resetAll();
            }
        });

        // 初始化
        loadHistory();
        if (history.length === 0) resetAll();
    });
</script>
</body>
</html>
